<template>
  <!--  <el-scrollbar class="standard-prop-tree full-height">-->
     <div>
  <el-table
    :data="propTree"
    default-expand-all
    row-key="Id"
    border
    class="prop-tree"
    :tree-props="{children: 'ChildrenList', hasChildren: 'hasChildren'}"
    style="width: 800px"
  >
    <el-table-column prop="Title" label="属性名称">
      <template slot-scope="scope">
        <el-input v-model="scope.row.Title" placeholder="请输入属性名称" />
      </template>
    </el-table-column>
    <el-table-column prop="Note" width="300px" label="属性备注">
      <template slot-scope="scope">
        <el-input v-model="scope.row.Note" placeholder="请输入属性备注" />
      </template>
    </el-table-column>
    <el-table-column width="80px" label="操作">
      <template slot-scope="scope">
        <el-link type="success" :underline="false" icon="el-icon-setting" @click="onConfigNode(scope.row)" />
        <el-link
          class="margin-left-10"
          type="danger"
          :underline="false"
          icon="el-icon-close"
          @click="onDeleteNode(scope.row)"
        />
        <el-dropdown class="margin-left-10" @command="(command) => onCommandNode(command, scope.row)">
          <el-link type="primary" :underline="false" icon="el-icon-plus" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="children">{{ $t('standard.addPropChildren') }}</el-dropdown-item>
            <el-dropdown-item command="sibling">{{ $t('standard.addPropSibling') }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <!--    <div>  测试按钮 注意隐藏--> 
  <!--      <el-button type="primary" size="small" @click="onSubmit">Submit</el-button>-->
  <!--    </div>-->
  <!--  </el-scrollbar>-->
</template>

<script>
import { updateStandard } from '@/api/standard'
import { deepClone } from '@/utils'

export default {
  name: 'StandardPropTree',
  props: {
    standard: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      propTree: []
    }
  },
  watch: {
    standard() {
      this.initPropTree()
    }
  },
  created() {
    this.initPropTree()
  },
  methods: {
    initPropTree() {
      if (this.standard) {
        if (this.standard.PropList && this.standard.PropList.length) {
          this.propTree = this.standard.PropList
        } else {
          this.propTree = [{ Id: new Date().getTime(), Title: '', Note: '' }]
        }
      } else {
        this.propTree = []
      }
    },
    onConfigNode(node) {

    },
    onCommandNode(command, node) {
      if (command === 'children') {
        if (!node.ChildrenList) {
          this.$set(node, 'ChildrenList', [])
        }
        node.ChildrenList.push({ Id: new Date().getTime(), Title: '', Note: '' })
      } else if (command === 'sibling') {
        this.insertSiblingNode(this.propTree, node)
      }
    },
    onDeleteNode(node) {
      this.deleteNode(this.propTree, node)
    },
    deleteNode(nodeList, node) {
      for (let i = 0; i < nodeList.length; i++) {
        if (nodeList[i].Id === node.Id) {
          nodeList.splice(i, 1)
          break
        }
        if (nodeList[i].ChildrenList) {
          this.deleteNode(nodeList[i].ChildrenList, node)
        }
      }
    },
    insertSiblingNode(nodeList, node) {
      for (let i = 0; i < nodeList.length; i++) {
        if (nodeList[i].Id === node.Id) {
          nodeList.splice(i + 1, 0, { Id: new Date().getTime(), Title: '', Note: '' })
          break
        }
        if (nodeList[i].ChildrenList) {
          this.insertSiblingNode(nodeList[i].ChildrenList, node)
        }
      }
    }, 
    async onSubmit(Id) {
      console.log("tree onSubmit()")
      const item = deepClone(this.standard)
      item.PropList = this.propTree
      console.log( item.PropList)
      item.Id = Id
      const data = await updateStandard(item)
      if (data.Message === 'ok') {
        this.$notify({
          title: this.$t('standard.success'),
          message: 'Success',
          type: 'success',
          duration: 2000
        })
        this.$router.push({ name: 'StandardPanel', query: { tab: 'item-list', id: data.Data.Id }})
      }
    }
  }
}
</script>

<style lang="scss">
.prop-tree {
  .cell {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
